import { DeleteOutlined } from '@ant-design/icons'

import { cx } from '@/utils/stringUtil'

import Draggable from './Draggable'

/**
 * 可排序表单项组件，用于显示已添加到表单的表单项，支持选择和删除操作
 * @param {Object} props - 组件属性
 * @param {Object} props.item - 当前表单项对象
 * @param {Object} props.selectedItem - 当前选中的表单项对象
 * @param {Function} props.onItemSelect - 表单项选择事件处理函数
 * @param {Function} props.onItemDelete - 表单项删除事件处理函数
 */
const SortableItem = ({ item, selectedItem, onItemSelect, onItemDelete }) => {
  return (
    <Draggable item={item}>
      <div
        className={cx(
          'p8px b-1px b-solid b-#e8e8e8 b-rd-4px bg-#fafafa flex cursor-pointer items-center justify-between',
          {
            hidden: item.hide,
            'b-primary': selectedItem?.id === item.id,
          },
        )}
        onClick={e => {
          e.stopPropagation()
          e.preventDefault()
          onItemSelect(item)
        }}
      >
        <div className='flex items-center'>
          <div className='ellipsis-1'>
            {item.icon}
            <span className='ml8px font-bold'>
              {item.properties.required && <span className='c-required mr5px'>*</span>}
              {item.properties.label}
            </span>
            <span className='ml8px c-#999' title={item.title}>
              ({item.title})
            </span>
          </div>
        </div>
        <DeleteOutlined
          className='c-del'
          onClick={e => {
            e.stopPropagation()
            e.preventDefault()
            onItemDelete(item.id)
          }}
        />
      </div>
    </Draggable>
  )
}

export default SortableItem
